<template>
      <div id="dialogs">
            <el-dialog
            :title="DialogData.title"
            :visible.sync="DialogData.show"
            width="80%"
            >
             <div class="newsinfo">
                   <el-form :model="formData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="资讯ID" prop="pass" v-if="DialogData.edit">
                              <el-input  v-model="formData.id" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="资讯标题" prop="pass">
                              <el-input  v-model="formData.title" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="资讯封面" prop="checkPass">
                              <img :src="formData.topic" class="slt" alt="" v-if="DialogData.edit">
                              <el-upload
                              action="https://jsonplaceholder.typicode.com/posts/"
                              list-type="picture-card"
                              :auto-upload="false"
                              :limit="1"
                              :on-change="onChange"
                              >
                              <i class="el-icon-plus"></i>
                              </el-upload>
                              <el-dialog :visible.sync="dialogVisible">
                              <img width="100%" :src="dialogImageUrl" alt="">
                              </el-dialog>
                        </el-form-item>
                        <el-form-item label="资讯摘要">
                              <el-input type="textarea" v-model="formData.abstract" @blur="isLong" placeholder="请保持在70字符长度以内!" :rows="3"></el-input>
                        </el-form-item>
                        <el-form-item label="资讯分类">
                              <el-radio v-model="formData.classify" label="1">盈友动态</el-radio>
                              <el-radio v-model="formData.classify" label="2">行业新闻</el-radio>
                        </el-form-item>
                        <el-form-item label="资讯内容">
                              <vue-ueditor-wrap v-model="formData.content" :config="myConfig"></vue-ueditor-wrap>
                        </el-form-item>
                  </el-form>
             </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="DialogData.show = false">取 消</el-button>
            <el-button type="primary" @click="subForm">确 定</el-button>
            </span>
            </el-dialog>
      </div>
</template>

<script>
      import VueUeditorWrap from 'vue-ueditor-wrap'
      export default {
            props: {
                  DialogData: Object,
                  formData: Object,
            },
            components: {
                  VueUeditorWrap
            },
            computed: {
                  token() {
                        return localStorage.miniToken
                  }
            },
            data() {
                  return {
                        dialogImageUrl: '',
                        dialogVisible: false,
                        autoUpload: false,
                        picChange: false,
                        myConfig: {
                              // 编辑器不自动被内容撑高
                              autoHeightEnabled: false,
                              // 初始容器高度
                              initialFrameHeight: 240,
                              // 初始容器宽度
                              initialFrameWidth: '100%',
                              // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                              serverUrl: '/webadmin/static/UEditor/php/controller.php',
                              // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                                 UEDITOR_HOME_URL: '/webadmin/static/UEditor/',
                              //   UEDITOR_HOME_URL: '/static/UEditor/'
                        }
                  }
            },
            methods: {
                  // 上传变化
                  onChange( file ) {
                        //  console.log(file);
                        this.formData.topic = file.raw
                        this.picChange = true
                  },
                  // 检测摘要长度
                  isLong() {
                        let len = this.formData.abstract.length
                        //console.log(len);
                        if (len > 70) {
                              this.formData.abstract = ""
                              this.$message.success("请不要超过70字")
                        }
                        
                  },
                  // 上传文章
                  async subForm() {
                        let fd = this.formData
                        let Sub = new FormData()
                        
                        if (this.token) {
                              Sub.append("title", fd.title)
                              Sub.append("token", this.token)
                              Sub.append("abstract", fd.abstract)
                              Sub.append("content", fd.content)
                              Sub.append("classify", fd.classify)
                              Sub.append("topic", fd.topic)
                              if (this.DialogData.edit) {
                                    Sub.append("id",fd.id)
                              }
                              // console.log(Sub);
                              let isAdd = this.DialogData.add
                              let isEdit = this.DialogData.edit
                              if (isAdd) {
                                    let res = await this.$axios.post("/admin/index/message", Sub )
                                    //console.log(res);
                                    let code = res.data.code
                                    if (code == 202 ) {
                                          this.$message.success("保存成功!")
                                          this.DialogData.show = false
                                          this.$emit("update")
                                          this.$router.go(0)
                                          
                                    } else if (code == 204) {
                                          this.$message.success("更新成功!")
                                          this.DialogData.show = false
                                          this.$emit("update")
                                          this.$router.go(0)
                                    } else {
                                          this.DialogData.show = false
                                    }
                              } else {
                                    if (this.picChange) {
                                          Sub.append("pic", "1")
                                    } else {
                                          Sub.delete("topic")
                                          Sub.append("pic", "2")
                                    }
                                    let res = await this.$axios.post("/admin/index/messagechange", Sub )
                                    //console.log(res);
                                    let code = res.data.code
                                    if (code == 202 ) {
                                          this.$message.success("保存成功!")
                                          this.DialogData.show = false
                                          this.picChange = false
                                          this.$emit("update")
                                          this.$router.go(0)
                                          
                                    } else if (code == 204) {
                                          this.$message.success("更新成功!")
                                          this.DialogData.show = false
                                          this.picChange = false
                                          this.$emit("update")
                                          this.$router.go(0)
                                    } else {
                                          this.DialogData.show = false
                                          this.picChange = false
                                    }
                              }
                              
                              
                        }
                  }
            },
      }
</script>

<style lang="scss" scoped>
.slt {
      width: 200px;
      height: 140px;
}
</style>